<template>
    <!-- 页面全局配置 -->
    <view class="pageconfig">
        <!--vuetop-->
        <view class="flex1   response  flex  justify-start  " style="flex-direction: column;">
            <view class="flex2   response  flex  justify-between  " style="flex-direction: row;align-items: center;">
                <view class="flex3    flex  justify-start  ">
                    <image mode="" class="picture4 " :src="picsrc4"></image>
                </view>
                <view class="flex5    flex  justify-start  " style="flex-direction: column;align-content: flex-start;align-items: center;">
                    <view class="flex6    flex  justify-start  " style="width:120rpx;height:200rpx;min-height:unset;">
                        <button class="onebutton7  radius cu-btn radius light bg-orange"> 颜色</button>
                    </view>
                    <view class="flex8    flex  justify-start  " style="width:120rpx;height:200rpx;min-height:unset;">
                        <button class="onebutton9  radius cu-btn radius light bg-yellow"> 花纹</button>
                    </view>
                    <view class="flex10    flex  justify-start  " style="width:120rpx;height:200rpx;min-height:unset;">
                        <button class="onebutton11  radius cu-btn radius light bg-olive"> 橡皮</button>
                    </view>
                    <view class="flex12    flex  justify-start  " style="width:120rpx;height:200rpx;min-height:unset;">
                        <button class="onebutton13  radius cu-btn radius light bg-purple"> 填充</button>
                    </view>
                    <view class="flex14    flex  justify-start  " style="width:120rpx;height:200rpx;min-height:unset;">
                        <button class="onebutton15  radius cu-btn radius light bg-green"> 对称</button>
                    </view>
                </view>
            </view>
            <view class="flex16   response  flex  justify-start  ">
                <view class="flex17   response  flex  justify-start  ">
                    <view class="flex18    flex  justify-center  " style="align-items: center;width:140rpx;height:140rpx;min-height:unset;">
                        <button class=" radius cu-btn radius light bg-pink"> 额头</button>
                    </view>
                    <view class="flex20    flex  justify-center  " style="align-items: center;width:140rpx;height:140rpx;min-height:unset;">
                        <button class=" radius cu-btn radius light bg-blue"> 眼睛</button>
                    </view>
                    <view class="flex22    flex  justify-center  " style="align-items: center;width:140rpx;height:140rpx;min-height:unset;">
                        <button class=" radius cu-btn radius light bg-orange"> 鼻子</button>
                    </view>
                    <view class="flex24    flex  justify-center  " style="align-items: center;width:140rpx;height:140rpx;min-height:unset;">
                        <button class=" radius cu-btn radius light bg-yellow"> 唇嘴</button>
                    </view>
                    <view class="flex26    flex  justify-center  " style="align-items: center;width:140rpx;height:140rpx;min-height:unset;">
                        <button class=" radius cu-btn radius light bg-green"> 脸颊</button>
                    </view>
                </view>
            </view>
        </view>

        <!--vuebottom-->
    </view>
</template>

<script>
    import Vue from 'vue'
    export default {
        data() {
            return {
                picsrc4: "https://shitangsys.cntdh.net//uploads/store/comment/20240406/e8b840921d749752a51186e1501813bf.jpg",




            };
        },
        onLoad() {


        },
        methods: {


            /**
             *          $vuetag = "";
             *          $vuecss = "";
             *          $vuejs = "";
             *
             */

            //获取数据

        }
    }
</script>

<style lang="less">
    /**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




    /**本页全局配置的代码**/
    .pageconfig {
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;
        height: 100vh;
    }



    /**pagedomcss**/


    .flex1 {
        width: 100%;
    }

    .flex2 {
        width: 100%;
    }

    .flex3 {
        width: 60%;
    }

    .picture4 {
        width: 100%;
        overflow: hidden;
        margin-top: 0rpx;
        margin-left: 40rpx;
    }

    .flex5 {
        width: 30%;
    }

    .flex6 {
        width: 100%;
        width: 120rpx;
        height: 200rpx;
    }

    .onebutton7 {
        margin-top: 50rpx;
    }

    .flex8 {
        width: 100%;
        width: 120rpx;
        height: 200rpx;
    }

    .onebutton9 {
        margin-top: 50rpx;
    }

    .flex10 {
        width: 100%;
        width: 120rpx;
        height: 200rpx;
    }

    .onebutton11 {
        margin-top: 50rpx;
    }

    .flex12 {
        width: 100%;
        width: 120rpx;
        height: 200rpx;
    }

    .onebutton13 {
        margin-top: 50rpx;
    }

    .flex14 {
        width: 100%;
        width: 120rpx;
        height: 200rpx;
    }

    .onebutton15 {
        margin-top: 50rpx;
    }

    .flex16 {
        width: 100%;
    }

    .flex17 {
        width: 100%;
        width: calc(100% - 40rpx);
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
        position: absolute;
        border: 2rpx dotted rgba(235, 163, 252, 1);
    }

    .flex18 {
        width: 100%;
        width: 140rpx;
        height: 140rpx;
    }

    .flex20 {
        width: 100%;
        width: 140rpx;
        height: 140rpx;
    }

    .flex22 {
        width: 100%;
        width: 140rpx;
        height: 140rpx;
    }

    .flex24 {
        width: 100%;
        width: 140rpx;
        height: 140rpx;
    }

    .flex26 {
        width: 100%;
        width: 140rpx;
        height: 140rpx;
    }
</style>